<template>
    <el-aside width="260px" class="sidebar">
        <!-- Logo区域 -->
        <div class="logo-area">
            <img src="../assets/OIP-C.png" alt="LingLong AI" class="logo">
        </div>
        <!-- 功能区域 -->
        <div class="feature-area">
            <div class="menu-wrapper">
            <el-menu default-active="1" class="menu" @select="handleSelect" router>
                <!-- AI对话功能组 -->
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <ChatLineRound />
                        </el-icon>
                        <span>AI助手</span>
                    </template>
                    <el-menu-item index="/chat">通用对话</el-menu-item>
                    <el-menu-item index="/writing">AI写作助理</el-menu-item>
                    <el-menu-item index="/reading">文档阅读助理</el-menu-item>
                </el-sub-menu>

                <!-- 绘画相关功能 -->
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <Picture />
                        </el-icon>
                        <span>AI绘画</span>
                    </template>
                    <el-menu-item index="/">创建绘画</el-menu-item>
                    <el-menu-item index="/draw/convert">创建设计</el-menu-item>
                    <el-menu-item index="/draw/history">创作历史</el-menu-item>
                    <!-- <el-menu-item index="/draw/favorites">我的收藏</el-menu-item> -->
                </el-sub-menu>

                <!-- 用户中心 -->
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>用户中心</span>
                    </template>
                    <el-menu-item index="/admin">用户信息</el-menu-item>
                    <!-- <el-menu-item index="/user/history">使用记录</el-menu-item> -->
                    <!-- <el-menu-item index="/user/settings">账户设置</el-menu-item> -->
                </el-sub-menu>
            </el-menu>
            </div>
            <!-- 底部登录/退出区域 -->
            <div class="bottom-menu">
                <el-menu>
                <el-menu-item index="4" v-if="!isLoggedIn">
                    <el-icon>
                        <Key />
                    </el-icon>
                    <span>登录/注册</span>
                </el-menu-item>
                <el-menu-item index="/login" v-else @click="handleLogout">
                    <el-icon>
                        <SwitchButton />
                    </el-icon>
                    <span>退出登录</span>
                </el-menu-item>
            </el-menu>
            </div>
        </div>
    </el-aside>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { useRouter } from 'vue-router'
import { ChatLineRound, Picture, User, Key, SwitchButton } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const isLoggedIn = ref(userStore.token)

// 处理菜单选择
const handleSelect = (index) => {
    if (index === 'logout') {
        handleLogout()
        return
    }
    router.push(index)
}

const handleLogout = () => {
    isLoggedIn.value = false
    userStore.logout()
    router.push('/login')
}
</script>

<style scoped>
.sidebar {
    background: #fff;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.logo-area {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
}

.logo {
    width: 60px;
    object-fit: contain;
    margin-right: 10px;
}

.logo-text-black {
    color: #333;
}

.logo-text-primary {
    color: #409EFF;
}

.feature-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 81px); /* Subtract logo-area height */
}

.menu-wrapper {
    flex: 1;
    overflow-y: auto;
}

.bottom-menu {
    margin-bottom: 20px;
}

.bottom-menu :deep(.el-menu) {
    border-right: none;
}

.menu {
    flex: 1;
    border-right: none;
}

.login-area {
    border-top: 1px solid #eee;
    margin-top: auto;
}

.el-menu-item {
    display: flex;
    align-items: center;
}

.el-menu-item .el-icon {
    margin-right: 8px;
}

.el-sub-menu :deep(.el-sub-menu__title) {
    display: flex;
    align-items: center;
}

.el-sub-menu :deep(.el-sub-menu__title .el-icon) {
    margin-right: 8px;
}
</style>
